{% extends "base.html" %}

{% block title %}停车场管理系统 - 首页{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-car"></i> 车辆管理
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card border-success">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0">车辆入场</h5>
                            </div>
                            <div class="card-body">
                                <form id="entryForm">
                                    <div class="mb-3">
                                        <label for="licensePlate" class="form-label">车牌号码</label>
                                        <input type="text" class="form-control" id="licensePlate" 
                                               placeholder="请输入车牌号" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="vehicleType" class="form-label">车辆类型</label>
                                        <select class="form-select" id="vehicleType">
                                            <option value="小型车">小型车</option>
                                            <option value="中型车">中型车</option>
                                            <option value="大型车">大型车</option>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-success w-100">
                                        <i class="fas fa-sign-in-alt"></i> 确认入场
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card border-warning">
                            <div class="card-header bg-warning text-dark">
                                <h5 class="mb-0">车辆出场</h5>
                            </div>
                            <div class="card-body">
                                <form id="exitForm">
                                    <div class="mb-3">
                                        <label for="exitLicensePlate" class="form-label">车牌号码</label>
                                        <input type="text" class="form-control" id="exitLicensePlate" 
                                               placeholder="请输入车牌号" required>
                                    </div>
                                    <button type="submit" class="btn btn-warning w-100">
                                        <i class="fas fa-sign-out-alt"></i> 计算费用
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h4 class="mb-0">
                    <i class="fas fa-info-circle"></i> 实时信息
                </h4>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    <h5>车位状态</h5>
                    <div class="display-4 text-primary">{{ remaining }}</div>
                    <p class="text-muted">剩余车位 / {{ total }}个总车位</p>
                </div>
                
                <div class="progress mb-3">
                    <div class="progress-bar bg-success" role="progressbar" 
                         style="width: {{ (occupied/total)*100 }}%">
                        已使用 {{ occupied }} 个
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 费用结算模态框 -->
<div class="modal fade" id="feeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title">费用结算</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="feeDetails"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmPayment">确认支付</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    let currentLicensePlate = '';
    
    // 车辆入场
    $('#entryForm').on('submit', function(e) {
        e.preventDefault();
        const licensePlate = $('#licensePlate').val().trim();
        const vehicleType = $('#vehicleType').val();
        
        if (!licensePlate) {
            alert('请输入车牌号');
            return;
        }
        
        $.ajax({
            url: '/api/entry',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                license_plate: licensePlate,
                vehicle_type: vehicleType
            }),
            success: function(response) {
                if (response.success) {
                    alert('入场成功！入场时间：' + response.entry_time);
                    $('#licensePlate').val('');
                    location.reload();
                } else {
                    alert(response.message);
                }
            }
        });
    });
    
    // 车辆出场
    $('#exitForm').on('submit', function(e) {
        e.preventDefault();
        const licensePlate = $('#exitLicensePlate').val().trim();
        
        if (!licensePlate) {
            alert('请输入车牌号');
            return;
        }
        
        $.ajax({
            url: '/api/exit',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                license_plate: licensePlate
            }),
            success: function(response) {
                if (response.success) {
                    currentLicensePlate = licensePlate;
                    $('#feeDetails').html(`
                        <p><strong>车牌号：</strong>${licensePlate}</p>
                        <p><strong>入场时间：</strong>${response.entry_time}</p>
                        <p><strong>出场时间：</strong>${response.exit_time}</p>
                        <p><strong>停车时长：</strong>${response.parking_hours} 小时</p>
                        <h4 class="text-danger">应付费用：¥${response.fee}</h4>
                    `);
                    $('#feeModal').modal('show');
                } else {
                    alert(response.message);
                }
            }
        });
    });
    
    // 确认支付
    $('#confirmPayment').on('click', function() {
        $.ajax({
            url: '/api/pay',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                license_plate: currentLicensePlate
            }),
            success: function(response) {
                if (response.success) {
                    alert('支付成功！费用：¥' + response.fee);
                    $('#feeModal').modal('hide');
                    $('#exitLicensePlate').val('');
                    location.reload();
                } else {
                    alert(response.message);
                }
            }
        });
    });
});
</script>
{% endblock %}
